<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <!-- <van-swipe-item v-for="bann in bannerImgs" :key="bann.id">
      <img :src="bann.img" alt="" />
    </van-swipe-item> -->

    <van-swipe-item>
      <img src="../../../public/images/17.jpg" alt="" />
    </van-swipe-item>
    <van-swipe-item>
      <img src="../../../public/images/15.jpg" alt="" />
    </van-swipe-item>
    <van-swipe-item>
      <img src="../../../public/images/16.jpg" alt="" />
    </van-swipe-item>
  </van-swipe>
</template>


<script>
import axios from "axios";
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  name: "Banner",
  data() {
    return {
      bannerImgs: [],
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/bannerImgs",
      method: "get",
      params: {},
    }).then((res) => {
      this.bannerImgs = res.data;
    });
  },
};
</script>
<style scoped>
.banner {
  width: 100%;
  height: 1.5rem;
  /* background-color: aqua; */
  display: flex;
  align-items: center;
  /* margin-top: 0.7rem; */
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* margin-top: 0.7rem; */
  height: 1.5rem;
}
img {
  width: 100%;
  height: 1.5rem;
}
</style>
